<template name="ys-shoping-cart-list">
	<view class="ys-shoping-cart-list">
    <view class="shop-list" v-for="(item, index) in list" :key="index">
    	<label class="checkbox">
    		<checkbox value=""  class="select"/>
    	</label>
    	<image :src="item.shopImg" mode="" class="shop-img"></image>
    	<view class="info">
        <view class="title">{{item.title}}</view>
        <view class="num1">{{item.num}}</view>
        <view class="money">￥{{item.money}}</view>
        <view class="num-select">
          <button  class="subtract">-</button>
          <text class="num2">5</text>
          <button class="plus">+</button>
        </view>
      </view>
    </view>  
  </view>
</template>

<script>
    export default {
        name: "ys-shoping-cart-list",
        props: {
            list: {
                type: Array,
                default: () => []
            },
        },
        mounted() {

        },
        data() {
            return {
                
            };
        },
        methods: {

        }
    }       
</script>

<style lang="scss">
  .ys-shoping-cart-list{
    margin-top: 80upx;
    width: 100%;
    height: 100%;
    .shop-list{
      width: 100%;
      height: 300upx;
      background-color: #fff;
      position: relative;
      margin-top: 20upx;
      .checkbox{
        float: left;
        left: 0;
        width: 10%;
        text-align: center;
        margin-top: 120upx;
      }
      .shop-img{
        width: 35%;
        height: 250upx;
        // background-color: red;
        float: left;
        margin-top: 25upx;
      }
      .info{
        height: 100%;
        width: 50%;
        float: left;
        // background-color: aqua;
        margin-left: 20upx;
        .title{
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding-right: 10upx;
          font-size:24rpx;
          color:#1A1A1A;
          margin-top: 20px;
        }
        .num1{
          font-size:24upx;
          color:#808080;
          margin-top:20upx;
        }
        .money{
          font-size:24upx;
          color:#e60013;
          margin-top: 20upx

        }
        .num-select{
          width: 260upx;
          height: 80upx;
          border: 1px solid #f4f4f4;
          margin-left: 30%;
          position: relative;
          .subtract {
            width: 30%;
            height: 100%;
            position: absolute;
            left: 0;
            border: 0;
            line-height: 80upx;
            font-size:50rpx;
            color:#e60013;

          }
          .subtract::after {
            border: 0;
          }
          .plus{
            width: 30%;
            height: 100%;
            position: absolute;
            right: 0;
            border: 0;
            line-height: 80upx;
            font-size:50rpx;
            color:#e60013;

          }
          .plus::after {
            border: 0;
          }
          .num2{
            display: block;
            position: absolute;
            width: 40%;
            height: 100%;
            left: 30%;
            text-align: center;
            line-height: 80upx;
            font-size:36rpx;
            color:#1A1A1A;

          }
        }
      }
      .shop-list:first-child{
        margin: 0;
      }
    }
  }
</style>
